<template>
	<view :class="'tab_list uni-flex  bg-white '+(isLeft ? 'justify-left' : 'justify-space-around')">
		<view class="tab_item" v-for="(item,key) in data">
			<view :class="(index == key ? 'tab-active' : '')" @click="clickTab(key)">{{item[field]}}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "tab-list",
	props: {
		data: { 
			type: Array,
			default: []
		},
		index: {
			type: Number,
			default: 0
		},
		isLeft: {
			type: Boolean,
			default: false
		},
		field: {
			type: String,
			default: "text"
		}
	},
	methods: {
		clickTab(index){
			this.$emit('result', index);
		}
	}
}
</script>

<style>
.tab_list { width: 100%;}
.tab_item {
	line-height: 60rpx;
}
.tab-active {
	color: #007AFF;
	border-bottom: 2px solid #007AFF;
}
</style>
